<template>
	<view class="container">
		<view class="qrimg">
			<tki-qrcode cid="qrcode2" ref="qrcode2" val="第二个二维码" :size="size" :onval="onval" :loadMake="loadMake"
				:usingComponents="true" />
		</view>
		<view class="formBox">
			<view class="formBox-item">
				<label for="">学号</label>
				<text>:</text>
				<text style="margin-left: 20rpx;">2024052306644</text>
			</view>
			<view class="formBox-item">
				<label for="">姓名</label>
				<text>:</text>
				<text style="margin-left: 20rpx;">张三</text>
			</view>
			<view class="formBox-item">
				<label for="">学号</label>
				<text>:</text>
				<text style="margin-left: 20rpx;">2024052306644</text>
			</view>
			<view class="formBox-item">
				<label for="">班级</label>
				<text>:</text>
				<text style="margin-left: 20rpx;">二年级三班</text>
			</view>
			<view class="formBox-item">
				<label for="">金额</label>
				<text>:</text>
				<text style="margin-left: 20rpx;">483.00</text>
			</view>
			<view class="formBox-item">
				<label for="">生成时间</label>
				<text>:</text>
				<text style="margin-left: 20rpx;">2024年08月23日 22：46：12</text>
			</view>
			<view class="formBox-item">
				<label for="">二维码有效期</label>
				<text>:</text>
				<text style="margin-left: 20rpx;">5分钟</text>
			</view>
		</view>
		<view class="btn">
			<u-button type="primary" text="微信立即支付"></u-button>
		</view>
		<view class="">如需支付宝支付，请截图后，打开支付宝扫一扫，选择相册， 直接识别二维码即可；</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				labelStyle:{
					textAlign: 'justify'
				},
				val: '二维码', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'rpx', // 单位
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
					},
				},
			}
		},
		onLoad() {

		},
		methods: {
			submit() {
				uni.navigateTo({
					url: "/pages/arrearage/arrearage"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		height: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-direction: column;
		.btn{
			margin: 50rpx auto;
			width: 40%;
		}
		.formBox {
			margin: 0 auto;
			margin-top: 20rpx;
			width: 90%;
			.formBox-item{
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				>label{
					width: 200rpx;
					text-align-last: justify;
					font-weight: bold;
				}
				>text{
					color: #6e6e6e;
				}
			}
		}

		.qrimg {
			margin: 50rpx 0;
		}
	}
</style>